<template>
	<view>
		<u-loading-page :loading="loading"></u-loading-page>
		<!-- <view>用户信息</view> -->
		<view class="user_header">
			<view class="flex_start_center">
				<view class="user_avatar">
					<image :src="sysUser.user.avatar || defaultAvatarUrl" class="avatar_img" @click="updateUserAvatar"/>
				</view>

				<!--普通会员-->
				<view class="flex_between_center" v-if="commonUserFlag">
					<view>
						<view class="user_name">{{ userRegister.companyName || "未知" }}</view>
						<view class="user_register" v-if="userRegister.perfectFlag === 1">已完善</view>
						<view class="user_register" style="color: #ff4c2f; border: 1rpx solid #ff4c2f" v-else>未完善</view>
					</view>
					<view class="user_info" @click="perfect">
						<image src="../../static/tabbar/user/user_icon_8.png" class="user_info_icon" />
						<view class="user_info_text">个人资料</view>
					</view>
				</view>

				<!--监管者或管理员-->
				<view class="flex_between_center" v-else>
					<view>
						<view class="user_name">{{ sysUser.user.userName || "未知" }}</view>
						<view class="user_register">监管者</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cell_separate"></view>

		<u-cell-group>
			<u-cell v-for="item of showCellList" :title="item.title" :key="item.title" :isLink="true" @click="toLink(item)">
				<template #icon>
					<image :src="item.icon" class="cell_icon"></image>
				</template>
				<template #right-icon>
					<u-icon name="arrow-right" color="#BABABA" size="20"></u-icon>
				</template>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
	import {navigateToMy, redirectToMy, showInfo, showModalPromise, showModal} from "@/util/uniUtils";
	import {userInfoMixins} from "@/mixins/userInfoMixins"
	import {userType} from "@/enum/userTypeEnum";
	import {getAction} from "@/util/api.js"

	let pathPrefix = '../../static/tabbar/user/'
	export default {
		mixins: [userInfoMixins],
		name: "user",
		data() {
			return {
				// 默认头像地址
				defaultAvatarUrl: pathPrefix + "user_avatar.png",
				cellList: [{
						id: 1,
						title: '照片墙',
						icon: pathPrefix + 'photo.png',
						link: '/subPackages/personal/photoWall',
					},
					{
						id: 2,
						title: '修改密码',
						icon: pathPrefix + 'password_change.png',
						link: '/subPackages/user/forgotPassword',
					},
					{
						id: 3,
						title: '关联四川省追溯平台',
						icon: pathPrefix + 'connect_spt.png',
						link: '/subPackages/personal/connectSpt',
					},
					{
						id: 4,
						title: '打印方式设置',
						icon: pathPrefix + 'print_way.png',
						link: '/subPackages/config/printMode',
					},
					{
						id: 5,
						title: '打印设置',
						icon: pathPrefix + 'print_setting.png',
						link: '/subPackages/config/printSetting',
					},
					{
						id: 6,
						title: '打印机序列号认证',
						icon: pathPrefix + 'update.png',
						link: '/subPackages/personal/printerSerialAuth',
					},
					{
						id: 7,
						title: '完善信息',
						icon: pathPrefix + 'improve_information.png',
						link: '/subPackages/user/perfect',
					},
					{
						id: 8,
						title: '软件更新',
						icon: pathPrefix + 'renew.png',
						link: '/subPackages/config/update',
					},
					{
						id: 9,
						title: '退出登录',
						icon: pathPrefix + 'exit.png',
						link: '/subPackages/user/login',
					},
					{
						id: 10,
						title: '咨询热线',
						icon: pathPrefix + 'ask_phone.png',
						link: '/subPackages/personal/consultTel',
					},
				],
				// 根据不同角色，需要展示的cell列表
				showCellList: [],
				loading: false,
				// 普通用户标志
				commonUserFlag: true,
				urls: {
					logout: '/api/user/logout'
				},
				// 是否选择图片
				isChooseImage: false
			}
		},
		onShow() {
			// 是否选择图片，如果是则不调用防止每次选择文件后刷新页面
			if (!this.isChooseImage) {
				this.init();
			}
		},
		methods: {
			/**
			 * 初始化方法
			 */
			async init() {
				// 先置空能看到的cell
				this.showCellList = []
				this.loading = true
				// 查询当前登录用户信息，使用 userInfoMixins 里的方法
				let result = await this.getUserInfo()
				if (result && !this.sysUser) {
					showInfo("用户信息查询失败")
					this.loading = false
					return;
				}

				// 用户类型
				let sysUserType = this.sysUser.user.roles[0].roleKey
				// console.log(sysUserType)
				if (userType.REGULATOR.code === sysUserType || userType.ADMIN.code === sysUserType) {
					// 监管者或管理人员，定义其能看到的列表
					let list = [2, 3, 8, 9, 10]
					this.showCellList = this.cellList.filter(t => list.includes(t.id))
					this.commonUserFlag = false;
				} else if (userType.COMMON.code === sysUserType) {
					// 普通用户，能看到的列表
					let list = [1, 2, 4, 5, 6, 7, 8, 9, 10]
					this.showCellList = this.cellList.filter(t => list.includes(t.id))
					this.commonUserFlag = true;

					// 如果信息完善后，审核不通过，给出提示
					if (this.userPerfect && this.userPerfect.examineStatus === 1) {
						let content = `您提交的资料未审核通过，是否从新提交？原因【${this.userPerfect.examineMsg}】`
						showModalPromise(content).then(flag => {
							if (flag) {
								this.perfect()
							}
						})
					}
				} else {
					this.showCellList = []
					showInfo("用户角色信息有误")
				}
				this.loading = false
			},

			/**
			 * 点击跳转
			 *
			 * @param value
			 */
			toLink(item) {
				let {id, link} = item
				switch (id) {
					case 1:
					case 4:
					case 5:
					case 6:
						// 判断是否是会员
						if (!this.userRegister) {
							showInfo("会员信息有误");
							return
						}
						// 未完善资料
						if (this.userRegister.perfectFlag !== 1) {
							showModalPromise("您还不是会员，资料完善后即可成为会员，是否立即完善？").then(flag => {
								if (flag) {
									this.perfect()
								}
							})
							return;
						}
						// 已完善资料，但未审核
						if (this.userPerfect && this.userPerfect.examineStatus === 0) {
							showModal("您提交的信息正在审核中，请耐心等待，审核通过后即可成为会员")
							return;
						}
						// 如果信息完善后，审核不通过，给出提示
						if (this.userPerfect && this.userPerfect.examineStatus === 1) {
							let content = `您提交的资料未审核通过，是否从新提交？原因【${this.userPerfect.examineMsg}】`
							showModalPromise(content).then(flag => {
								if (flag) {
									this.perfect()
								}
							})
							return;
						}
						navigateToMy(link)
						break;
					case 2:
					case 3:
					case 7:
					case 8:
					case 10:
						navigateToMy(link)
						break;
					case 9:
						// 退出登录
						this.logout(link)
					default:
						break;
				}

			},
			/**
			 * 完善信息
			 */
			perfect() {
				navigateToMy('/subPackages/user/perfect')
			},
			/**
			 * 退出登录
			 *
			 * @param link 退出登录后跳转地址
			 */
			logout(link) {
				this.loading = true;
				// 清除缓存
				uni.removeStorage('userInfo')
				getAction(this.urls.logout).then(res => {
					if (res.code === 200) {
						redirectToMy(link)
					} else {
						showInfo(res.msg)
					}
				}).finally(() => {
					this.loading = false
				})
			},
			/**
			 * 修改用户头像
			 */
			async updateUserAvatar() {
				this.isChooseImage = true
				await this.updateAvatar().finally(()=> {
					this.isChooseImage = false
				});

			}
		},
	}
</script>

<style lang="scss" scoped>
	.cell_icon {
		width: 50rpx;
		height: 50rpx;
		//height: 50rpx;
		padding-right: 15rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
	}

	.cell_separate {
		height: 15rpx;
		background-color: #ededed;
	}



	.user_header {
		margin-top: 40rpx;

		//width: 120rpx;
		//height: 120rpx;
		//头像
		.flex_start_center {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 40rpx;
		}

		.user_avatar {
			margin-left: 20rpx;
			margin-right: 20rpx;

			//border:1px solid red;
			.avatar_img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 200rpx;
			}
		}

		//名字
		.user_name {
			font-size: 36rpx;
		}

		//注册按钮
		.user_register {
			border: 1rpx solid #00b54e;
			font-size: 24rpx;
			text-align: center;
			border-radius: 20rpx;
			line-height: 40rpx;
			margin-top: 10rpx;
			width: 120rpx;
			color: #00b54e;
		}

		.flex_between_center {
			display: flex;
			justify-content: space-between;
			width: 100%;
			align-items: center;
		}

		//个人资料
		.user_info {
			display: flex;
			justify-content: center;
			align-items: center;
			/*margin-left: 280rpx;*/
			margin:0rpx 20rpx;
			min-width: 150rpx;
			//text-align: center;
			background-color: #00b54e;
			border-radius: 20rpx;
			height: 45rpx;

			.user_info_icon {
				width: 25rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.user_info_text {
				color: #ffffff;
				font-size: 24rpx;
			}
		}
	}
	.cell_separate {
		height: 15rpx;
		background-color: #ededed;
	}
</style>
